// // 默认背景色
// const bgColor = "#000000";
// // 像素点颗粒度
// const gap = 6;

// const c = document.createElement("canvas");
// c.width = window.innerWidth;
// c.height = window.innerHeight;
// document.body.appendChild(c);
// const ctx = c.getContext("2d");

// // 确保获取到 canvas 的上下文
// if (ctx) {
//   const clearCanvas = () => {
//     ctx.fillStyle = bgColor;
//     ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
//   };

//   const image = new Image();
//   image.src = "./res/http.png";

//   // 像素点位置
//   const points: number[][] = [];

//   const imgLoad = () => {
//     const w = image.width,
//       h = image.height;

//     ctx.createImageData(w, h);
//     ctx.drawImage(image, 0, 0, w, h);

//     const imgData = ctx.getImageData(0, 0, w, h).data;

//     for (let i = 0; i < h; i += gap) {
//       for (let j = 0; j < w; j += gap) {
//         let position = (w * i + j) * 4;
//         let r = imgData[position],
//           g = imgData[position + 1],
//           b = imgData[position + 2];
//         if (r + g + b !== 0) {
//           points.push([j, i]);
//         }
//       }
//     }
//     clearCanvas();
//     c.addEventListener("mousedown", drawFire);
//   };

//   image.onload = imgLoad;

//   const drawFire = (e: MouseEvent) => {
//     let raf: number | undefined = undefined;
//     raf && cancelAnimationFrame(raf);

//     const { clientX, clientY } = e;
//     const w = image.width,
//       h = image.height,
//       sx = clientX - w / 2,
//       sy = clientY - h / 2;

//     const createFirePoint = (): FirePoint[] => {
//       const firePoints = [] as FirePoint[];
//       // 颜色
//       const hue = Math.floor(Math.random() * 51) + 150;
//       // 色调变化
//       const hueVariance = 30;
//       for (let i = 0; i < points.length; i++) {
//         const point = points[i];
//         const angle = Math.floor(Math.random() * 360);
//         const speed = Math.random() * 5 + 0.4;

//         firePoints.push({
//           radians: (angle * Math.PI) / 180,
//           sx: point[0] + sx,
//           sy: point[1] + sy,
//           x: clientX,
//           y: clientY,
//           speed,
//           radius: speed,
//           size: Math.floor(Math.random() * 3) + 1,
//           hue:
//             Math.floor(
//               Math.random() * (hue + hueVariance - (hue - hueVariance))
//             ) +
//             (hue - hueVariance),
//           brightness: Math.floor(Math.random() * 31) + 50,
//           alpha: (Math.floor(Math.random() * 61) + 40) / 100,
//         });
//       }
//       return firePoints;
//     };

//     const drawFireworks = () => {
//         clearCanvas();
//       for (var i = 0; i < particles.length; i++) {
//         const p = particles[i] as FirePoint;
//         const vx = (p.sx - p.x) / 20;
//         const vy = (p.sy - p.y) / 20;
//         p.x += vx;
//         p.y += vy;
//         p.radius *= 1 - p.speed / 100;
//         p.alpha -= 0.005;
//         ctx.beginPath();
//         ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2, false);
//         ctx.closePath();
//         ctx.fillStyle =
//           "hsla(" + p.hue + ", 100%, " + p.brightness + "%, " + p.alpha + ")";
//         ctx.fill();
//       }

//     };

//     let particles: FirePoint[] = [];
//     const onPlayFire = () => {
//       particles = createFirePoint();
//       function tick() {
//         drawFireworks();
//         raf = requestAnimationFrame(tick);
//       }

//       tick();
//     };
//     onPlayFire();
//   };
// } else {
//   alert("没有canvas 的上下文");
// }
